<!-- Dom模板 -->
<template>
  <div class="loginBox">
    <!-- Dom内容 -->
    <div class="login_main">
      <div class="top">
        <h1>团餐</h1>
      </div>
      <input type="text" placeholder="请输入账号！" v-model="username" />
      <input type="text" placeholder="请输入密码！" v-model="passname" />
      <button @click="btn()">登录</button>
      <p @click="ntn()">没有注册，请先注册</p>
      <!-- <p>{{this.$store.state.loginData}}</p> -->
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      msg: "测试",
      username: "",
      passname: "",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // this.btn()
  },
  // Vue方法定义
  methods: {
    async btn() {
      await axios
        .post("/api/get", { user: this.username, pass: this.passname })
        .then((res) => {
          let ress = res.data;
          if (ress.code === "01") {
            alert(ress.msg);
            let obj = {
              id: ress.id,
              username: this.username,
              passname: this.passname,
            };
            localStorage.setItem("deng",JSON.stringify(obj));
            this.$router.push({ path: "/my" });
          } else if (ress.code === "02") {
            alert(ress.msg);
          } else if (ress.code === "03") {
            alert(ress.msg);
            this.$router.push({ path: "/register" });
          }
        });
      //vuex
      // this.$store.commit("loginBtn", {
      //   user: this.username,
      //   pass: this.passname,
      // });
    },
    ntn() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.loginBox {
  background-image: url("../../../static/img/13.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
.top {
  width: 100%;
  text-align: center;
  margin: 30px 0;
}
h1 {
  color: #ccc;
}
.login_main {
  padding: 0 10px;
  width: 320px;
  height: 400px;
  background: #f1f1f1;
  position: fixed;
  left: 48px;
  bottom: 150px;
}
input {
  width: 250px;
  height: 40px;
  outline: none;
  border: none;
  background: #f1f1f1;
  border-bottom: 1px solid #cccc;
  color: #ccc;
  margin: 10px 0 10px 20px;
}
button {
  width: 250px;
  height: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  outline: none;
  margin: 50px 0 10px 25px;
  background: #ccc;
  outline: none;
  border: none;
  color: red;
  font-weight: 600;
}
p {
  margin-top: 50px;
  margin-left: 150px;
  font-size: 16px;
  border-bottom: 1px solid skyblue;
  color: blue;
}
</style>